﻿<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<%@ include file="../common/header.jsp"%>
<script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>

	<div class="container " style="margin-top: 20px">
		<%@ include file="../common/top.jsp"%>

		<div class="row">
			<div class="col-sm-3">
				<c:set var="menu" value="customer" />
				<%@ include file="../common/menu.jsp"%>
			</div>
			<div class="col-sm-9">
				<div class="row">
					<div class="col-sm-12">
						<h1 class="page-head-line">客户管理</h1>
					</div>
				</div>
				<form class="form-inline" id="searchForm" action="/customer/list.do"
					method="post">
					<input type="hidden" name="currentPage" id="currentPage" value="1">
					<div class="form-group">
						<label>关键字:</label> <input type="text" class="form-control"
							name="keyword" value="" placeholder="请输入姓名">
					</div>

					<div class="form-group">
						<label>状态:</label> <select class="form-control" name="status">
							<option value="-1">全部</option>
							<option value="0">潜在客户</option>
							<option value="1">客户池</option>
							<option value="2">开发失败</option>
							<option value="3">流失</option>
						</select>
					</div>
					<script>
                	$("#searchForm select[name='status']").val(${qo.status});
               		</script>


					<button type="submit" class="btn btn-primary">
						<span class="glyphicon glyphicon-search"></span> 查询
					</button>
					<button type="button" class="btn btn-success inputBtn">
						<span class="glyphicon glyphicon-plus"></span> 添加
					</button>
				</form>

				<table class="table table-striped table-hover">
					<tr>
						<th>编号</th>
						<th>名称</th>
						<th>年龄</th>
						<th>性别</th>
						<th>电话</th>
						<th>qq</th>
						<th>职业</th>
						<th>来源</th>
						<th>业务员</th>
						<th>状态</th>
						<th>操作</th>
					</tr>

					<c:forEach var="entity" items="${pageInfo.list}" varStatus="s">
						<tr>
							<td>${s.index+1+(pageInfo.pageNum-1)*pageInfo.pageSize}</td>
							<td>${entity.name}</td>
							<td>${entity.age }</td>
							<td>${entity.genderName}</td>
							<td>${entity.tel}</td>
							<td>${entity.qq}</td>
							<td>${entity.job.title}</td>
							<td>${entity.source.title}</td>
							<td>${entity.seller.name}</td>
							<td>${entity.statusName}</td>
							<td>
								<a class="btn btn-info btn-xs inputBtn" data-json='${entity.json}'> 
									<span class="glyphicon glyphicon-pencil"></span> 编辑
								</a>
								<a role="button" class="btn btn-primary btn-xs traceBtn" data-json='${entity.json}'>
                                	<span class="glyphicon glyphicon-tag"></span> 跟进
	                            </a>
	                            <a role="button" class="btn btn-success btn-xs changeStatusBtn" data-json='${entity.json}'>
	                                <span class="glyphicon glyphicon-plane"></span> 修改状态
	                            </a>
                                <a role="button" class="btn btn-warning btn-xs transferBtn" data-json='${entity.json}'>
                                    <span class="glyphicon glyphicon-leaf"></span> 移交
                                </a>
							</td>
						</tr>
					</c:forEach>

				</table>

				<%@ include file="../common/page.jsp"%>
			</div>
		</div>
	</div>
	<!-- 编辑模态框  -->
	<div class="modal fade" id="inputModal" tabindex="-1" role="dialog"
		aria-labelledby="inputModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">编辑</h4>
				</div>
				<div class="modal-body">
					<!--填充编辑界面-->
	                <form class="form-horizontal" action="/customer/saveOrUpdate.do" method="post" id="editForm">
	                    <input type="hidden" name="id"/>
	                    <div class="form-group" >
	                        <label class="col-lg-4 control-label">姓名：</label>
	                        <div class="col-lg-6">
	                            <input type="text" class="form-control" name="name" placeholder="请输入客户姓名"/>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">年龄：</label>
	                        <div class="col-lg-6">
	                            <input type="number" class="form-control" name="age" placeholder="请输入客户年龄"/>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">性别：</label>
	                        <div class="col-lg-6">
	                            <select class="form-control" name="gender">
	                                <option value="1">男</option>
	                                <option value="0">女</option>
	                            </select>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">电话：</label>
	                        <div class="col-lg-6">
	                            <input type="text" class="form-control" name="tel" placeholder="请输入客户电话"/>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">QQ：</label>
	                        <div class="col-lg-6">
	                            <input type="text" class="form-control"name="qq" placeholder="请输入客户QQ"/>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">职业：</label>
	                        <div class="col-lg-6">
	                            <select class="form-control" name="job_id">
	                                <c:forEach var="j" items="${jobs}">
	                                    <option value="${j.id}">${j.title}</option>
	                                </c:forEach>
	                            </select>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">来源：</label>
	                        <div class="col-lg-6">
	                            <select class="form-control" name="source_id">
	                                <c:forEach var="s" items="${sources}">
	                                    <option value="${s.id}">${s.title}</option>
	                                </c:forEach>
	                            </select>
	                        </div>
	                    </div>
	                </form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary submitBtn">
						保存</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
		
	<!--修改状态辑模态框  -->
	<div class="modal fade" id="changeStatusModal" tabindex="-1" role="dialog"
		aria-labelledby="inputModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">修改客户状态</h4>
				</div>
				<div class="modal-body">
					<!--填充编辑界面-->
	                <form class="form-horizontal" action="/customer/saveOrUpdate.do" method="post" id="changeStatusForm">
	                    <input type="hidden" name="id"/>
	                    <div class="form-group" >
	                        <label class="col-lg-4 control-label">客户姓名：</label>
	                        <div class="col-lg-6">
	                            <input type="text" class="form-control" name="name" readonly/>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">客户状态：</label>
	                        <div class="col-lg-6">
	                            <select class="form-control" name="status">
									<option value="0">潜在客户</option>
									<option value="1">客户池</option>
									<option value="2">开发失败</option>
									<option value="3">流失</option>
	                            </select>
	                        </div>
	                    </div>
	                </form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary changeStatusSubmitBtn">
						保存</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
	</div>

	<!-- 跟进历史模态框 -->
	<div class="modal fade" id="traceModal" tabindex="-1" role="dialog"
		aria-labelledby="inputModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">跟进历史</h4>
				</div>
				<div class="modal-body">
					<!--填充编辑界面-->
	                <form class="form-horizontal" action="/customerTraceHistory/saveOrUpdate.do" method="post" id="traceForm">
	                    <input type="hidden" name="customer.id"/>
	                    <div class="form-group" >
	                        <label class="col-lg-4 control-label">客户姓名：</label>
	                        <div class="col-lg-6">
	                            <input type="text" class="form-control" name="name" readonly/>
	                        </div>
	                    </div>
	                    <div class="form-group" >
	                        <label class="col-lg-4 control-label">跟进时间：</label>
	                        <div class="col-lg-6">
	                            <input type="text" class="form-control" name="traceTime" placeholder="请输入跟进时间" readonly/>
	                        </div>
	                    </div>
	                    <div class="form-group" >
	                        <label class="col-lg-4 control-label">跟进记录：</label>
	                        <div class="col-lg-6">
	                            <input type="text" class="form-control" name="traceDetails" placeholder="请输入跟进记录" />
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">交流方式：</label>
	                        <div class="col-lg-6">
	                            <select class="form-control" name="traceTypeId">
	                            	<c:forEach var="t" items="${types}">
	                            		<option value="${t.id}">${t.title}</option>
	                            	</c:forEach>
	                            </select>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">跟进结果：</label>
	                        <div class="col-lg-6">
	                            <select class="form-control" name="traceResult">
									<option value="3">优</option>
									<option value="2">中</option>
									<option value="1">差</option>
	                            </select>
	                        </div>
	                    </div>
	                   <div class="form-group">
                        <label class="col-lg-4 control-label">备注：</label>
                        <div class="col-lg-6">
                            <textarea class="form-control" name="remark" placeholder="请输入备注"></textarea>
                        </div>
                    </div>
	                </form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary traceSubmitBtn">
						保存</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
	</div>
	
	
	<!-- 客户移交 -->
	<div class="modal fade" id="transferModal" tabindex="-1" role="dialog" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title">客户移交</h4>
	            </div>
	            <div class="modal-body">
	                <!--填充编辑界面-->
	                <form class="form-horizontal" action="/customerTransfer/save.do" method="post" id="transferForm">
	                    <input type="hidden" name="customer.id" />
	                    <input type="hidden" name="oldSeller.id" />
	                    <div class="form-group" >
	                        <label class="col-lg-4 control-label">客户姓名：</label>
	                        <div class="col-lg-6">
	                            <input type="text" class="form-control" id="cname" readonly/>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">旧营销人员：</label>
	                        <div class="col-lg-6">
	                            <input type="text" class="form-control" id="oldSeller" readonly/>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">新营销人员：</label>
	                        <div class="col-lg-6">
	                            <select class="form-control" name="newSeller.id">
	                            </select>
	                        </div>
	                    </div>
	                    <div class="form-group">
	                        <label class="col-lg-4 control-label">移交原因：</label>
	                        <div class="col-lg-6">
	                            <textarea type="text" class="form-control" name="reason" cols="10"></textarea>
	                        </div>
	                    </div>
	                </form>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary transferSubmitBtn">保存</button>
	            </div>
	        </div>
	    </div>
	</div>
<script>
	$(function() {
		
		//添加和编辑按钮点击事件
		$(".inputBtn").click(function() {
			//清空模态框数据
			$("#editForm input").val("");
			//加填数据data-json
			var json = $(this).data("json");
			console.log(json);
			if (json) {
				$("#editForm input[name='id']").val(json.id);
				$("#editForm input[name='name']").val(json.name);
				$("#editForm input[name='age']").val(json.age);
				$("#editForm select[name='gender']").val(json.gender);
				$("#editForm input[name='tel']").val(json.tel);
				$("#editForm input[name='qq']").val(json.qq);
				$("#editForm select[name='job_id']").val(json.jobId);
                $("#editForm select[name='source_id']").val(json.sourceId);
			}
			//弹出编辑模态框
			$("#inputModal").modal("show");
			
		});
		
		$(".changeStatusBtn").click(function() {
			//清空模态框数据
			$("#changeStatusForm input").val("");
			//加填数据data-json
			var json = $(this).data("json");
			console.log(json);
			if (json) {
				$("#changeStatusForm input[name='id']").val(json.id);
				$("#changeStatusForm input[name='name']").val(json.name);
				$("#changeStatusForm input[name='status']").val(json.status);
			}
			$("#changeStatusModal").modal("show");
		});
		
		//跟进历史
		$(".traceBtn").click(function() {
			//加载数据json 回显数据
			var json = $(this).data("json");
			console.log(json);
			if (json) {
				$("#traceForm input[name='customer.id']").val(json.id);
				$("#traceForm input[name='name']").val(json.name);
				$("#traceForm select[name='traceTypeId']").val(9);
			}
			//弹出模态框
			$("#traceModal").modal("show");
			
		});
		
		
		//点击提交 
		$(".submitBtn").click(function() {
			$("#editForm").submit();
		});
		
		
		$(".traceSubmitBtn").click(function() {
			$("#traceForm").submit();
		})
		
		//点击提交 
		$(".changeStatusSubmitBtn").click(function() {
			$("#changeStatusForm").submit();
		});
		
		
		////////////////////
		$("#traceForm input[name='traceTime']").click(function () {
            WdatePicker({
                readOnly: true, //只读
                maxDate: new Date() //最多选到今天
            });
        });
		
		
		//移交按钮点击事件
        $(".transferBtn").click(function () {
            var json = $(this).data("json");
            showModal(json);
        });
		
		$(".transferSubmitBtn").click(function() {
			$("#transferForm").submit();
		})
	})
	
	function showModal(json) {
        //发送请求,查询当前可移交的新销售员
        $.get("/employee/queryNewSellers.do", {id: json.sellerId}, function (data) {
            //清空原来的新销售员
            $("#transferForm select[name='newSeller.id']").html("");
            //重新填充
            $.each(data, function (index, ele) {
                $("<option value='"+ele.id+"'>"+ele.name+"</option>")
                        .appendTo("#transferForm select[name='newSeller.id']");
            });
            //必须放在响应函数中,先完成了异步加载,才能回显
            //回显新销售为当前登录的用户
            //使用Shiro标签来回显
            //$("#transferForm select[name='newSeller.id']").val(<@shiro.principal property="id" />);
        }, "json");

        //回填其他数据
        $("#transferForm input[name='customer.id']").val(json.id);
        $("#transferForm input[name='oldSeller.id']").val(json.sellerId);
        $("#oldSeller").val(json.sellerName);
        $("#cname").val(json.name);
        $("#transferModal").modal("show");
    }
</script>
</body>
</html>